import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Spin } from 'antd';
import { WeaDialog, WeaInputSearch, WeaLocaleProvider, WeaPopoverHrm } from 'ecCom';
import { WeaTableNew } from 'comsMobx';

const getLabel = WeaLocaleProvider.getLabel;
let WeaTable = WeaTableNew.WeaTable;

@inject('listStore')
@observer
export default class VotePersonList extends Component {
  static defaultProps = {
    prefixCls: 'group-voting-personlist',
  }

  /* 关闭Dialog */
  onCancel = () => {
    const { listStore } = this.props;
    const { setStoreState, personListStore } = listStore;
    personListStore.tableUpdate({ data: [] });
    setStoreState({
      personVisible: false,
      personTitle: '',
      usertype: '',
      optionid: '',
      isExistStore: false,
    });
  }

  getColumns = (columns) => {
    let newColumns = '';
    newColumns = columns.map((column) => {
      let newColumn = column;
      newColumn.render = (text, record, index) => { // 前端元素转义
        let valueSpan = record[`${newColumn.dataIndex}span`] !== undefined ? record[`${newColumn.dataIndex}span`] : record[newColumn.dataIndex];
        return (
          newColumn.dataIndex == 'voteusername' ?
          <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@ytm6t8@${record.id}`}>
            <a style={{ cursor: 'pointer', color: '#4D7AD8' }}
              href={`javaScript:openhrm(${record.id})`}
              onClick={window.pointerXY}
              dangerouslySetInnerHTML={{ __html: valueSpan }}
            />
          </WeaPopoverHrm>
            :
            <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
        );
      };
      return newColumn;
    });
    return newColumns;
  }

  render() {
    const { prefixCls, listStore } = this.props;
    const { personVisible, personTitle, personListStore, groupchatvoteprelist, personListLoading, isExistStore } = listStore;
    if (personVisible) {
      window.setDialogFullWindow = false;
    }
    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@8dc0mm`}
        visible={personVisible}
        title={personTitle}
        icon="icon-portal-reportform"
        iconBgcolor="#0079DE"
        style={{ width: 660, height: 350 }}
        onCancel={this.onCancel}
        className={prefixCls}
      >
        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@hipwa0`} spinning={personListLoading}>
          <div className={`${prefixCls}-title`}>
            <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@o68n1f`}
              placeholder={getLabel('516184', '请输入成员姓名')}
              onSearch={v => groupchatvoteprelist({ lastname: v })}
            />
          </div>
          {
            isExistStore && (
              <div className={`${prefixCls}-list`}>
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@o7fjoy`}
                  comsWeaTableStore={personListStore}
                  needScroll
                  scroll={{ x: true, y: 233 }}
                  getColumns={this.getColumns}
                />
              </div>
            )
          }
        </Spin>
      </WeaDialog>
    );
  }
}
